<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">留言管理</div>
      <div class="message-operation-container">
        <div>
          <el-button type="danger" size="small" icon="el-icon-delete" :disabled=" selectedData.length === 0" @click="batchDeletionVisible = true">批量删除</el-button>
          <el-button type="primary" size="small" icon="el-icon-delete" :disabled=" selectedData.length === 0" @click="batchUpdateMessage">批量操作</el-button>
        </div>
        <div class="message-select-container">
          <el-select v-model="currentAudit" size="small" placeholder="请选择">
            <el-option
              v-for="audit in auditType"
              :key="audit.value"
              :label="audit.label"
              :value="audit.value"
            />
          </el-select>
        </div>
      </div>
      <div class="message-table-container">
        <el-table
          ref="multipleTable"
          :data="messageData"
          border
          style="width: 100%"
          @select="handleSelection"
          @select-all="handleAllSelection"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            prop="blog_message"
            label="内容"
          />

          <el-table-column
            align="center"
            prop="blog_message"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag :type="messageTagColor[scope.row.audit]">{{ messageTagName[scope.row.audit] }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="create_time"
            label="创建时间"
          />
          <el-table-column
            label="操作"
            align="center"
            width="280"
          >
            <template slot-scope="scope">
              <el-button slot="reference" type="primary" style="margin-right: 10px" size="mini" @click="updateMessage(scope.row)">修改</el-button>
              <el-popconfirm
                title="你确定删除这个留言?"
                icon="el-icon-info"
                icon-color="red"
                @onConfirm="delMessage(scope.row.id)"
              >
                <el-button slot="reference" type="danger" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="message-paging-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageData.pageSize"
          :page-sizes="[5,10,20]"
          :total="pageData.total"
          background
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog
      :title="messageDialog.dialogTitle"
      :visible.sync="messageDialog.dialogVisible"
      width="20%"
      @close="handleDialogClose"
    >
      <div style="text-align: center">
        <el-select v-model="messageDialog.currentAuditType" size="small" placeholder="请选择">
          <el-option
            v-for="audit in messageDialog.auditType"
            :key="audit.value"
            :label="audit.label"
            :value="audit.value"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="messageDialogBtn">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="batchDeletionVisible"
      width="20%"
      center
      @close="batchDeletionVisible = false"
    >
      <h2 style="text-align: center">确定要删除这些留言吗?</h2>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchDeletionVisible = false">取 消</el-button>
        <el-button type="danger" @click="batchDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import { getMessagesApi, deleteMessagesApi, putMessagesApi, delMessagesBatchApi, putMessagesBatchApi } from '@/api/messages'
import PagerMixin from '@/components/mixins/PagerMixin'
import { Message } from 'element-ui'

export default {
  name: 'Messages',
  mixins: [PagerMixin],
  data() {
    return {
      batchDeletionVisible: false,
      messageDialog: {
        dialogVisible: false,
        DialogType: '', // all ,alone
        dialogTitle: '',
        currentAuditType: '',
        currentMessageId: '',
        auditType: [
          {
            value: 1,
            label: '通过'
          },
          {
            value: 2,
            label: '未通过'
          }
        ]
      },
      currentAudit: -1,
      auditType: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '待审核'
        },
        {
          value: 1,
          label: '通过'
        },
        {
          value: 2,
          label: '未通过'
        }
      ],
      messageData: [],
      selectedData: [], // 被选中的数据
      messageTagColor: {
        1: 'success',
        0: 'warning',
        2: 'danger'
      },
      messageTagName: {
        0: '待审核',
        1: '通过',
        2: '未通过'
      }
    }
  },
  watch: {
    currentAudit(oldValue, newValue) {
      this.getCurrentData()
    }
  },
  created() {
    this.getCurrentData()
  },
  methods: {

    getCurrentData() {
      const params = { pageNum: this.pageData.pageNum, pageSize: this.pageData.pageSize }
      if (this.currentAudit !== -1) {
        params.audit = this.currentAudit
      }
      getMessagesApi(params).then(resp => {
        this.getPageConfig(resp)
        this.messageData = resp.data.result
      }).catch(error => {
        console.log(error)
      })
    },
    batchDelete() {
      // 批量删除
      const ids = this.selectedData.map(item => { return item.id })
      delMessagesBatchApi({ ids: ids }).then(resp => {
        Message({
          message: '批量删除成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.selectedData = []
        this.batchDeletionVisible = false
        this.getCurrentData()
      }).catch(error => {
        console.log(error)
        this.selectedData = []
        this.batchDeletionVisible = false
      })
    },
    handleSelection(selection, row) { // 表格数据被选中触发
      this.selectedData = selection
    },
    handleAllSelection(selection) { // 表格数据全选触发
      this.selectedData = selection
    },
    delMessage(id) {
      deleteMessagesApi({ id: id }).then(resp => {
        Message({
          message: '创建成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.getCurrentData()
      })
    },
    updateMessage(row) {
      this.messageDialog.DialogType = 'alone'
      this.messageDialog.currentMessageId = row.id
      this.messageDialog.currentAuditType = row.audit !== 0 ? row.audit : 1
      this.messageDialog.dialogTitle = '审核消息'
      this.messageDialog.dialogVisible = true
    },
    batchUpdateMessage() {
      this.messageDialog.DialogType = 'all'
      this.messageDialog.currentMessageId = ''
      this.messageDialog.currentAuditType = ''
      this.messageDialog.dialogTitle = '批量审核消息'
      this.messageDialog.dialogVisible = true
    },
    handleDialogClose() {
      this.messageDialog.DialogType = ''
      this.messageDialog.currentMessageId = ''
      this.messageDialog.currentAuditType = ''
      this.messageDialog.dialogTitle = ''
      this.messageDialog.dialogVisible = false
    },
    messageDialogBtn() {
      if (this.messageDialog.currentAuditType === '') {
        Message({
          message: '请设置类型',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }

      if (this.messageDialog.DialogType === 'alone') {
        const params = { id: this.messageDialog.currentMessageId, audit: this.messageDialog.currentAuditType }
        putMessagesApi(params).then(resp => {
          Message({
            message: '修改成功',
            type: 'success',
            duration: 5 * 1000
          })
          this.handleDialogClose()
          this.getCurrentData()
        })
      }
      if (this.messageDialog.DialogType === 'all') {
        const ids = this.selectedData.map(item => { return item.id })
        putMessagesBatchApi({ ids: ids, audit: this.messageDialog.currentAuditType }).then(resp => {
          Message({
            message: '批量修改成功',
            type: 'success',
            duration: 5 * 1000
          })
          this.selectedData = []
          this.handleDialogClose()
          this.getCurrentData()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>

<style lang="less">

  .message-operation-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .message-select-container {
      display: flex;
      margin-left: 20px;

      & div:first-child {
        margin-right: 20px;
      }

    }
  }

  .message-table-container {
    margin: 20px 0;
  }

  .message-paging-container {

    padding-bottom: 30px;

    & > div:first-child {
      float: right;
    }
  }
</style>
